---
import { getBoilerPlateUrl } from '@utils/pages';
import type { InternalFramework } from '@ag-grid-types';
import JavascriptTemplate from '../framework-templates/JavascriptTemplate.astro';
import TypescriptTemplate from '../framework-templates/TypescriptTemplate.astro';
import { getIsDev } from '@utils/env';
import ReactTemplate from '../framework-templates/ReactTemplate.astro';
import VueTemplate from '../framework-templates/VueTemplate.astro';
import type { GeneratedContents } from '@components/example-generator/types';
import AngularTemplate from '../framework-templates/AngularTemplate.astro';
import PostInitMessageScript from '@components/example-runner/components/PostInitMessageScript.astro';
import { toTitle } from '@utils/toTitle';

interface Props {
    internalFramework: InternalFramework;
    pageName: string;
    exampleName: string;
    exampleUrl: string;
    generatedContents: GeneratedContents;
    /**
     * Whether to use relative paths for script files references
     */
    relativePath?: boolean;
    /**
     * Whether to add a script to post an `init` message to the parent
     */
    addInitMessageScript?: boolean;
    /**
     * Whether to not include system js code
     */
    ignoreSystemJs?: boolean;
    /**
     * Extra styles to add to HTML
     */
    extraStyles?: string;

    /**
     * Nonce value used for Content Security Policies
     */
    nonce?: string;
}

const {
    internalFramework,
    pageName,
    exampleName,
    exampleUrl,
    generatedContents,
    relativePath,
    addInitMessageScript,
    ignoreSystemJs,
    extraStyles,
    nonce,
} = Astro.props as Props;

const isDev = getIsDev();

const library = 'grid';

const { entryFileName, files, scriptFiles, styleFiles, isEnterprise, isIntegratedCharts, isLocale, extras } =
    generatedContents || {};
const indexFragment = files['index.html'] ?? '';
const headFragment = files?.['head.html'] ?? '';
const appLocation = relativePath ? '' : exampleUrl;
const boilerPlateUrl = relativePath
    ? ''
    : getBoilerPlateUrl({
          library,
          internalFramework,
      });

const timeNow = Date.now();
const title = `${toTitle(pageName)} - ${toTitle(exampleName)}`;

const usesMathRandom = Object.values(generatedContents?.files).some((file) => file.includes('window.agRandom()'));

const shouldShowTemplate = (framework: InternalFramework) => {
    return internalFramework === framework;
};
---

{
    generatedContents.excluded && (
        <>
            <h3 data-testid="excluded-framework">PLACEHODER</h3>
            <p>
                Example not generated as exampleConfig.json has supportedFrameworks specified but not including this
                one.
            </p>
        </>
    )
}

{
    !generatedContents && (
        <p>
            Error generating content for: <a href={exampleUrl}>{exampleUrl}</a>
        </p>
    )
}

{
    shouldShowTemplate('vanilla') && (
        <JavascriptTemplate
            isDev={isDev}
            title={title}
            modifiedTimeMs={timeNow}
            isEnterprise={isEnterprise}
            isIntegratedCharts={!!isIntegratedCharts}
            isLocale={!!isLocale}
            scriptFiles={scriptFiles}
            styleFiles={styleFiles}
            indexFragment={indexFragment!}
            appLocation={appLocation}
            extraStyles={extraStyles}
            extras={extras}
            headFragment={headFragment}
            usesMathRandom={usesMathRandom}
            nonce={nonce}
        >
            {addInitMessageScript && (
                <PostInitMessageScript nonce={nonce} pageName={pageName} exampleName={exampleName} />
            )}
        </JavascriptTemplate>
    )
}

{
    shouldShowTemplate('typescript') && (
        <TypescriptTemplate
            isDev={isDev}
            title={title}
            modifiedTimeMs={timeNow}
            entryFileName={entryFileName!}
            styleFiles={styleFiles}
            indexFragment={indexFragment!}
            appLocation={appLocation}
            boilerplatePath={boilerPlateUrl}
            extraStyles={extraStyles}
            isEnterprise={isEnterprise}
            extras={extras}
            headFragment={headFragment}
            usesMathRandom={usesMathRandom}
            nonce={nonce}
        >
            {addInitMessageScript && (
                <PostInitMessageScript nonce={nonce} pageName={pageName} exampleName={exampleName} />
            )}
        </TypescriptTemplate>
    )
}

{
    (shouldShowTemplate('reactFunctional') || shouldShowTemplate('reactFunctionalTs')) && (
        <ReactTemplate
            isDev={isDev}
            title={title}
            modifiedTimeMs={timeNow}
            entryFileName={entryFileName!}
            scriptFiles={scriptFiles}
            styleFiles={styleFiles}
            appLocation={appLocation}
            boilerplatePath={boilerPlateUrl}
            ignoreSystemJs={ignoreSystemJs}
            extraStyles={extraStyles}
            isEnterprise={isEnterprise}
            internalFramework={internalFramework}
            extras={extras}
            headFragment={headFragment}
            usesMathRandom={usesMathRandom}
            nonce={nonce}
        >
            {addInitMessageScript && (
                <PostInitMessageScript nonce={nonce} pageName={pageName} exampleName={exampleName} />
            )}
        </ReactTemplate>
    )
}

{
    shouldShowTemplate('angular') && (
        <AngularTemplate
            isDev={isDev}
            title={title}
            isEnterprise={isEnterprise}
            modifiedTimeMs={timeNow}
            entryFileName={entryFileName!}
            styleFiles={styleFiles}
            scriptFiles={scriptFiles}
            appLocation={appLocation}
            boilerplatePath={boilerPlateUrl}
            extraStyles={extraStyles}
            extras={extras}
            headFragment={headFragment}
            usesMathRandom={usesMathRandom}
            nonce={nonce}
        >
            {addInitMessageScript && (
                <PostInitMessageScript nonce={nonce} pageName={pageName} exampleName={exampleName} />
            )}
        </AngularTemplate>
    )
}

{
    shouldShowTemplate('vue3') && (
        <VueTemplate
            isDev={isDev}
            title={title}
            isEnterprise={isEnterprise}
            modifiedTimeMs={timeNow}
            entryFileName={entryFileName!}
            scriptFiles={scriptFiles}
            styleFiles={styleFiles}
            appLocation={appLocation}
            boilerplatePath={boilerPlateUrl}
            extraStyles={extraStyles}
            extras={extras}
            headFragment={headFragment}
            usesMathRandom={usesMathRandom}
            nonce={nonce}
        >
            {addInitMessageScript && (
                <PostInitMessageScript nonce={nonce} pageName={pageName} exampleName={exampleName} />
            )}
        </VueTemplate>
    )
}
